<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @changeAddress="changeAddress"
      @changeGdArea="changeGdArea"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import VForm from "@/components/VForm/index";
export default {
  components: {
    VForm,
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    areaTreeOptions:{},
  },
  watch: {
        'width': {
            handler(newVal, oldVal) {
                console.log('newVal===',newVal, oldVal)
                let w = this.width.split('%')[0]
                if(w>=60){
                    this.rowspan = 2
                }else{
                    this.rowspan = 1
                }
            },
            deep: true,
            immediate: true
        },
        'areaTreeOptions':{
          handler(newVal, oldVal) {
            this.formData.options.forEach(t=> {
              if (t.key == 'areaCode') {
                t.option.data = newVal
              }
            })
            console.log("wstchaa=========this.areaTreeOptions",this.areaTreeOptions)
          },
          deep: true,
          immediate: true
        },
    },
  data() {
    return {
        rowspan:1,
      dialogVisible: true,
      formData: {
        form: {
          input: "",
          text: "",
          switch: true,
          time: "10:10:10",
          date: "2021-04-27",
          datetime: "2021-04-27 10:10:10",
          "date-to-date": "",
          "datetime-to-datetime": "",
          number: 0,
          select: "",
          radio: "",
          checkbox: [],
          fileList:[],
          mapData:{},
          areaCode:'',
          
          // mapData:{
          //   address:'北京市朝阳区朝阳公园',
          //   gpsX:116.484839,
          //   gpsY:39.948178,
          //   towncode:"123",
          // },
        },
        options: [
          {
            title: "输入框",
            key: "input",
            type: "text",
            disabled: false,
            columnWidth: 'w50', //列宽，可选值：w33,w50,w66,w100(分别代表占1/3,1/2,2/3,整行)，默认w33
          },
          {
            title: "开关",
            key: "switch",
            type: "switch",
            columnWidth: 'w50',
          },
          {
            title: "文本",
            key: "text",
            type: "textarea",
            columnWidth: 'w100',
          },
          {
            title: "时间",
            key: "time",
            type: "time",
            columnWidth: 'w50',
          },
          {
            title: "日期",
            key: "date",
            type: "date",
            columnWidth: 'w50',
          },
          {
            title: "日期时间",
            key: "datetime",
            type: "datetime",
          },
          {
            title: "日期范围",
            key: "date-to-date",
            type: "date-to-date",
          },
          {
            title: "时间范围",
            key: "datetime-to-datetime",
            type: "datetime-to-datetime",
          },
          {
            title: "数字",
            key: "number",
            type: "number",
          },
          {
            title: "选择框",
            key: "select",
            type: "select",
            multiple:false,
            option: {
              data: [],
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "单选框",
            key: "radio",
            type: "radio",
            option: {
              data: [
                {
                  id: 1,
                  label: "女",
                  value: 0,
                },
                {
                  id: 2,
                  label: "男",
                  value: 1,
                },
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "多选框",
            key: "checkbox",
            type: "checkbox",
            option: {
              data: [
                {
                  id: 1,
                  title: "1",
                },
                {
                  id: 2,
                  title: "2",
                },
                {
                  id: 3,
                  title: "3",
                },
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "title", // 指定label对应data的字段
              },
            },
          },
          {
              title:'地点选择',
              type:'mapPosition',
              key:'mapData',
              disabled: true,
          },
          {
              title:'文件上传',
              key:'fileList',
              type:'file',
              fileType:'image',
              uploadTextTip:'仅限上传图片',
              listType:'picture-card',
          },
          {
            title: "行政区划（新）",
            key: "areaCode_new",
            type: "gdAreaSelect",
            disabled: true,
          },
        ],
        rules: {
            input: [
                { required: true, message: '请输入', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
        },
        labelWidth: "120px",
      },
    };
  },
  methods: {
      sure(){
          console.log('sure===',this.formData.form)
         this.$refs.vformComponents.$refs.form.validate().then(res => {
             this.close()
         })
          
      },
    cancel(){
        this.close()
    },
    handleClose(done) {
        this.$refs.vformComponents.$refs.form.resetFields();
        done()
        this.close()
    },
    close(){
        this.$emit('closeDialog')
    },
    changeAddress(data){
      console.log('changeAddress',data)
      this.formData.form.mapData = data
      this.formData.form.areaCode_new = data.areaCode
    },
    changeGdArea(data){
      console.log('changeGdArea',data)
      console.log(this.formData.form.areaCode_new)
    }
  },
  created() {
    setTimeout(() => {
      this.formData.options[9].option.data = [
        {
          id: 1,
          label: "女",
          value: 0,
        },
        {
          id: 2,
          label: "男",
          value: 1,
        },
      ]
    }, 1000);
  },
  mounted() {
    setTimeout(() => {
      this.formData.form.mapData = {
        address:'北京市朝阳区朝阳公园',
        gpsX:116.484839,
        gpsY:39.948178,
        towncode:"123",
      };
      this.formData.form.areaCode_new = ["440000000000", "440100000000", "440106000000"]
      this.formData.options[0].disabled = true
    }, 1000);
    setTimeout(() => {
      this.formData.options[0].disabled = false
    }, 2000);
  },
};
</script>

<style lang="scss" scoped>
</style>